<template>
  <!-- 商品橱窗对话框 -->
  <div class="shop-window">
    <el-dialog
      title="选择商品"
      :visible.sync="isAddProduct"
      width="80%"
      :before-close="cancel">
      <div class="shop-window-content">
        <el-row class="card-content">
          <!--    搜索-->
          <el-col :span="24" class="search-wrapper">
            <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
          </el-col>
          <!--    表格-->
          <el-col :span="24" class="data">
            <el-table
              :data="data"
              stripe
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
              <el-table-column prop="specifications" label="规格" align="center"></el-table-column>
              <el-table-column prop="picture" label="图片" align="center">
                <img src="@/project/assets/images/logo.jpg" class="picture"/>
              </el-table-column>
              <el-table-column prop="price" label="价格(￥)" align="center"></el-table-column>
            </el-table>
            <div class="pager-group">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, jumper, prev, next"
                :total="total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="submit">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import PageMixin from '@/framework/mixins/pageMixin'
import {save} from "@/project/service/product";

export default {
  name:'shopWindow',
  mixins: [
    PageMixin,
  ],
  props: {
    isAddProduct:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    id:{
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data() {
    return {
      searchItems: [
        {name: '商品名称', key: 'title', type: 'string'},
      ],
      data:[
        {id:'1',name:'纯棉布料',type:'SAAS商城商品',picture:'888',specifications:'白色、红色、蓝色',price:'18',link:'',state:'上架'},
        {id:'2',name:'衬衫布料',type:'SAAS商城商品',picture:'888',specifications:'白色、红色、蓝色',price:'100',link:'',state:'上架'},
        {id:'3',name:'帆布布料',type:'SAAS商城商品',picture:'888',specifications:'白色、红色、蓝色',price:'9.9',link:'',state:'上架'},
        {id:'4',name:'纯棉布料',type:'SAAS商城商品',picture:'888',specifications:'白色、红色、蓝色',price:'54',link:'',state:'上架'},
        {id:'5',name:'纯棉布料',type:'外部商品',picture:'888',specifications:'',price:'99',link:'https://www.baidu.com',state:'下架'},
        {id:'6',name:'纯棉布料',type:'外部商品',picture:'888',specifications:'',price:'',link:'https://www.baidu.com',state:'下架'},
      ],
      idList:[],
    }
  },
  components:{ Search },
  methods: {
    //条件搜索
    searchBySearchItem(){

    },
    //表格项选择触发事件
    handleSelectionChange(row){
      let idList = []
      row.forEach(item => {
        idList.push(item.id)
      })
      this.idList = idList
      // console.log(this.idList)
    },
    //提交
    submit(){
      let param = {
        productList:[
          {
            productId:1,
            type:"saas",
            title:"",
            price:99.9,
            thumbnail:"",
            position:1,
            live:{
              id:this.id
            }
          }
        ]
      }
      // save(param,data => {
      //   console.log(data)
      // })
      this.cancel()
    },
    //取消
    cancel(){
      this.$emit('close',false);
    },
  }
}
</script>

<style lang="less" scoped>
.picture{
  width: 50px;
  height:50px;
}

.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
